<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="ID" width="80" prop="id"></el-table-column>
        <el-table-column label="发布者" width="180">
          <template slot-scope="scope">
            <el-tag size="medium">{{ scope.row.user.nickname }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="跟帖数量" width="80" prop="comment_length"></el-table-column>
        <el-table-column label="封面" width="234">
          <template slot-scope="scoped">
            <div>
              <img class="myimg" v-if="scoped.row.cover[0]" :src="scoped.row.cover[0].url | fixUrl" alt />
              <img class="myimg" v-else src="../../assets/logo.png" alt />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scoped">
            <el-button size="mini" @click="editClick(scoped.row.id)">编辑</el-button>
            <el-popconfirm @onConfirm="sureClick(scoped.row.id)" title="这是一段内容确定删除吗？">
              <el-button class="delBtn" size="mini" slot="reference" type="danger">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="data.pageIndex"
        :page-sizes="[1, 3, 5, 7]"
        :page-size="data.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script>

export default {
  data() {
    return {
      tableData: [],
      data: {
        pageIndex: 1,
        pageSize: 3
      },
      total: 0
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const { data: res } = await this.$http.get('/post', {
        params: this.data
      })
      console.log(res)
      this.tableData = res.data
      this.total = res.total
    },
    // 显示条数发生改变时
    handleSizeChange(newSize) {
      this.data.pageSize = newSize
      this.getData()
    },
    // 当前页数发生改变时
    handleCurrentChange(newPage) {
      this.data.pageIndex = newPage
      this.getData()
    },
    sureClick(id){
      this.$message.success('模拟删除成功，哈哈哈,当前的id为'+id)
    },
    editClick(id){
      this.$router.push('/index/publish?id='+id)
    }
  },
  filters:{
    fixUrl(url){
      const reg = /^http/
      if(reg.test(url)){
        return url
      }else{
        return 'http://127.0.0.1:3000' + url
      }
    }
  }
}
</script>
<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 30px;
}
.el-pagination {
  margin-top: 30px;
}
.myimg {
  width: 100%;
  height: 146px;
  object-fit: cover;
}
.delBtn{
  margin-left:10px;
}
</style>